<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}">
    <link rel="stylesheet" th:href="@{/admin/css/other/register.css}">
    <!-- 资 源 引 入 -->
    <script th:src="@{/component/layui/layui.js}"></script>
    <script th:src="@{/component/pear/pear.js}"></script>
    <!--    用于ajax-->
    <script th:src="@{/js/jquery.js}"></script>
    <!-- 用于AES加密   -->
    <script th:src="@{/js/myjs/util.js}"></script>
    <title>注册</title>
    <style>
        .layadmin-user-jump-change {
            float: right;
        }
        .layadmin-link {
            color: #029789!important;
        }
        .layadmin-user-login-other>* {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            font-size: 14px;
        }
        .layadmin-user-login-other .layui-icon {
            position: relative;
            top: 2px;
            font-size: 26px;
        }
        .layui-icon-login-qq {
            color: #3492ED;
        }
        .layui-icon-login-wechat {
            color: #4DAF29;
        }
        .layui-icon-login-weibo {
            color: #CF1900;
        }
        .layui-tab-title .layui-this:after {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 41px;
            border-width: 1px;
            border-style: solid;
            border-bottom-color: #4DAF29;
            border-radius: 2px 2px 0 0;
            box-sizing: border-box;
            pointer-events: none;
        }
        .layui-tab .layui-tab-title li {
            position: relative;
            line-height: 40px;
            min-width: 65px;
            margin: 0;
            padding: 0px 43px;
            text-align: center;
            cursor: pointer;
        }
        .error{
            color: red;
            display: none;
        }
        .eye-icon{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        .layui-tab {
            margin: -20px 0;
            text-align: left!important;
        }
        .layui-tab-content {
            margin-top: 0px !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
    </style>
</head>
<body th:background="@{/admin/images/background.svg}" style="background-size: cover;">
<div class="layui-form">
    <div class="layui-form-item">
        <img class="logo" th:src="@{/admin/images/logo.png}" />
        <div class="title">Wang Xue</div>
            <div class="desc">
                你 若 不 离 开，便 是 我 的 终 点。
            </div>
    </div>
    <div class="layui-tab" lay-filter="test">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="11">用户名/邮箱</li>
            <li lay-id="22">手机号</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form id="user-save" lay-filter="user-save">
                    <input placeholder="用户名" type="text" autocomplete="username" id="usernameAndEmail" name="usernameAndEmail" lay-verify="required" hover class="layui-input"/>
                    <span class="error" id="usernameError">用户名/邮箱已存在</span>
                    <span class="error" id="usernameNull">用户名/邮箱不能为空</span>
                    <div class="layui-form-item">
                        <input placeholder="密 码" type="password" autocomplete="password1" id="namePassword" name="namePassword" lay-verify="required" hover class="layui-input"/>
                        <i class="layui-icon layui-icon-eye-invisible eye-icon" onclick="showPassword('namePassword')"></i>
                        <span class="error" id="passwordError">密码必须以字母开头，长度在6~16之间<br/>只能包含字符、数字和下划线</span>
                        <span class="error" id="passwordNull">密码不能为空</span>
                    </div>
                    <div class="layui-form-item">
                        <input placeholder="确认密码" type="password" autocomplete="repassword1" id="nameRePassword" name="nameRePassword" lay-verify="required" hover class="layui-input"/>
                        <i class="layui-icon layui-icon-eye-invisible eye-icon" onclick="showPassword('nameRePassword')"></i>
                        <span class="error" id="rePasswordError">密码不一致</span>
                        <span class="error" id="rePasswordNull">确认密码不能为空</span>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="agree" id="agree" title="阅读并同意《用户协议与条款》" lay-skin="primary" required>
                        <span class="error" id="agreeError"><br />请阅读并同意《用户协议与条款》</span>
                    </div>
                    <div class="layui-form-item">
                        <span class="error" id="msg"></span>
                        <button type="submit" class="pear-btn pear-btn-success" lay-filter="user-save">注册</button>
                    </div>
                    <div class="layadmin-user-login-other">
                        <label>社交账号注册</label>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
                        <a href="login" class="layadmin-user-jump-change layadmin-link" style="margin-top: 5px">已有账号登录</a>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form id="user-save1" lay-filter="user-save1">
                    <input placeholder="电话号码" type="text" id="phone" name="phone" lay-verify="required" hover class="layui-input"/>
                    <span class="error" id="phoneError">请输入正确的手机号</span>
                    <span class="error" id="phoneNull">手机号不能为空</span>
                    <span class="error" id="phoneExist">手机号已注册</span>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <input type="text" name="vercode" id="vercode" class="layui-input" placeholder="验证码" lay-verify="required" minlength="6" maxlength="6"/>
                                <span class="error" id="vercodeNull">验证码不能为空</span>
                                <span class="error" id="vercodeError">验证码错误</span>
                                <span class="error" id="vercodeSuccess">验证码已发送</span>
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="email-getCodeBtn">获取验证码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input placeholder="密 码" type="password" autocomplete="password2" id="password" name="password" lay-verify="required" hover class="layui-input"/>
                        <i class="layui-icon layui-icon-eye-invisible eye-icon" onclick="showPassword('password')"></i>
                        <span class="error" id="phonePasswordError">密码必须以字母开头，长度在6~16之间<br/>只能包含字符、数字和下划线</span>
                        <span class="error" id="phonePasswordNull">密码不能为空</span>
                    </div>
                    <div class="layui-form-item">
                        <input placeholder="确认密码" type="password" autocomplete="repassword2" id="rePassword" name="rePassword" lay-verify="required" hover class="layui-input"/>
                        <i class="layui-icon layui-icon-eye-invisible eye-icon" onclick="showPassword('rePassword')"></i>
                        <span class="error" id="rePhonePasswordError">密码不一致</span>
                        <span class="error" id="rePhonePasswordNull">确认密码不能为空</span>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="agree1" id="agree1" title="阅读并同意《用户协议与条款》" lay-skin="primary" required />
                        <span class="error" id="agree1Error"><br />请阅读并同意《用户协议与条款》</span>
                    </div>
                    <div class="layui-form-item">
                        <span class="error" id="msg1"></span>
                        <button type="submit" class="pear-btn pear-btn-success" lay-filter="user-save1">注册</button>
                    </div>
                    <div class="layadmin-user-login-other">
                        <label>社交账号注册</label>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
                        <a href="login" class="layadmin-user-jump-change layadmin-link" style="margin-top: 5px">已有账号登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--小眼睛事件-->
<script>
    // 监听小眼睛图标的点击事件
    function showPassword(id) {
        var input = document.getElementById(id);
        if (input.type === 'password') {
            input.type = 'text';
            input.className = 'layui-input';
        } else {
            input.type = 'password';
            input.className = 'layui-input layui-input-password';
        }
        var icon = input.nextElementSibling;
        icon.className = icon.className === 'layui-icon layui-icon-eye-invisible eye-icon' ? 'layui-icon layui-icon-eye eye-icon' : 'layui-icon layui-icon-eye-invisible eye-icon';
    }
</script>


<script type="text/javascript" th:inline="javascript">
    // thymeleaf 获取当前项目路径
    /*<![CDATA[*/
    const ctx = /*[[@{/}]]*/;
    /*]]>*/
    // 当前窗口 不是最外层窗口
    if (window != window.top){
        // 父窗口 window.parent，最外层窗口 window.top
        window.top.location.href = ctx;
    }
</script>

<!--焦点事件-->
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var respPublicKey;// 后端返回的公钥
        // 监听表单提交事件
        $(document).ready(function() {
            // 注册按钮
            $('#user-save').on('submit', function(event) {
                event.preventDefault();
                var usernameAndEmail = $('#usernameAndEmail').val();
                var namePassword = $('#namePassword').val();
                var nameRePassword = $('#nameRePassword').val();

                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(respPublicKey);
                var encryptedUsernameAndEmail = encrypt.encrypt(usernameAndEmail);
                var encryptedNamePassword = encrypt.encrypt(namePassword);
                var encryptedNameRePassword = encrypt.encrypt(nameRePassword);

                // 将加密后的数据发送到后端
                $.ajax({
                    url: '/register', // 后端接口地址
                    type: 'POST',
                    data: {
                        "username": encryptedUsernameAndEmail,
                        "password": encryptedNamePassword,
                        "rePassword": encryptedNameRePassword
                    },
                    success: function(response) {
                        // 处理后端返回的结果
                        console.log(response);// 打印返回的公钥
                        if (response.code === 200){
                            window.location.href = ctx + response.data;
                        }else {
                            if (response.code === 500){
                                console.log(response.msg);
                                document.getElementById("msg").innerHTML = response.msg;
                            }else {
                                window.location.href = ctx + "util/500";
                            }
                        }
                    },
                    error: function(error) {
                        console.log(error);
                        window.location.href = ctx + "util/500";
                    }
                });
                return false;
            });
        });

        // 当表单提交按钮被点击时
        document.querySelector('button[lay-filter="user-save"]').addEventListener('click', function(){
            // 检查用户协议是否勾选
            let agreeCheckbox = document.querySelector('input[type="checkbox"][name="agree"]');
            //检查其他输入框是否为空
            if (document.getElementById('usernameAndEmail').value === "" || document.getElementById('usernameAndEmail').value  === null){
                document.getElementById('usernameNull').style.display = 'inline';

            }else {
                document.getElementById('usernameNull').style.display = 'none';
            }
            if (document.getElementById('namePassword').value === "" || document.getElementById('namePassword').value === null){
                document.getElementById('passwordNull').style.display = 'inline';
            }else {
                document.getElementById('passwordNull').style.display = 'none';
            }
            if (document.getElementById('nameRePassword').value === "" || document.getElementById('nameRePassword').value === null){
                document.getElementById('rePasswordNull').style.display = 'inline';
            }else {
                document.getElementById('rePasswordNull').style.display = 'none';
            }
            if (agreeCheckbox.checked === false){
                document.getElementById('agreeError').style.display = 'inline';
            }else {
                document.getElementById('agreeError').style.display = 'none';
            }
        });

        // 当复选框被点击时
        document.getElementById('agree').addEventListener('change', function() {
            var agreeError = document.getElementById('agreeError');
            if (this.checked) {
                agreeError.style.display = 'none';
            } else {
                agreeError.style.display = 'inline';
            }
        });

        //监听用户名输入框的失去焦点事件
        $(document).ready(function() {
            $("#usernameAndEmail").blur(function() {
                var username = $(this).val();
                var usernameError = document.getElementById('usernameError');
                var usernameNull = document.getElementById('usernameNull');
                if (username == null || username === ""){
                    usernameNull.style.display = 'inline';
                }else {
                    usernameNull.style.display = 'none';
                }
                // 异步验证用户名是否存在
                if (username) {
                    $.ajax({
                        url: "checkUsername", // 后端验证接口地址
                        type: "POST",
                        data: {
                            username: username
                        },
                        success: function(response) {// 成功回调函数
                            if (response === "not exists") {
                                console.log("用户名或邮箱可用");
                                usernameError.style.display = 'none';
                            } else {
                                console.log("用户名或邮箱不可用");
                                usernameError.style.display = 'inline';
                            }
                        },
                        error: function() {
                            console.log("请求后端验证接口失败");
                        }
                    });
                }
            });
        });

        // 监听用户名密码输入框的失去焦点事件
        $('#namePassword').on('input', function() {
            var password = $(this).val();
            var passwordReg = /^[a-zA-Z]\w{5,15}$/; // 密码正则表达式,以字母开头，长度在6~16之间，只能包含字符、数字和下划线
            // 验证密码格式是否正确
            if(passwordReg.test(password)){
                $('#passwordError').hide(); // 隐藏错误提示
                $('#passwordNull').hide();// 隐藏空提示
            } else {
                $('#passwordError').show(); // 显示错误提示
                $('#passwordNull').hide();
            }
        })
        document.getElementById('namePassword').addEventListener('blur', function() {
            var passwordNull = document.getElementById('passwordNull');
            var passwordError = document.getElementById('passwordError');
            if (this.value == null || this.value == ""){
                passwordNull.style.display = 'inline';
                passwordError.style.display = 'none';
            } else {
                passwordNull.style.display = 'none';
            }
        });

        //监听用户名确定密码输入框的失去焦点事件
        $('#nameRePassword').on('input', function(){
            var rePassword = $(this).val();
            var password = document.getElementById('namePassword').value;
            if (rePassword!== password){
                $('#rePasswordError').show();// 显示错误提示
                $('#rePasswordNull').hide();// 隐藏空提示
            } else {
                $('#rePasswordError').hide();// 隐藏错误提示
                $('#rePasswordNull').hide();// 隐藏空提示
            }
        });
        document.getElementById('nameRePassword').addEventListener('blur', function() {
            var rePasswordError = document.getElementById('rePasswordError');
            var rePasswordNull = document.getElementById('rePasswordNull');
            if (this.value == null || this.value === ""){
                rePasswordNull.style.display = 'inline';
                rePasswordError.style.display = 'none';
            } else {
                rePasswordError.style.display = 'none';
                rePasswordNull.style.display = 'none';
            }
        });

        // 监听表单提交事件
        $(document).ready(function() {
            addScript("/js/jsencrypt.min.js");
            $.ajax({
                url: '/public-key', // 发起GET请求到/public-key端点
                type: 'GET',
                success: function (publicKey) {
                    // 在请求成功时，publicKey参数将包含后端返回的公钥字符串
                    console.log('Received public key:', publicKey);
                    respPublicKey = publicKey; // 将公钥存储在全局变量中
                },
                error: function () {
                    // 在请求失败时的处理逻辑
                    console.error('Failed to retrieve public key');
                }
            });
            $('#user-save1').on('submit', function (event) {
                event.preventDefault();// 阻止表单默认提交事件
                var phone = $('#phone').val();// 手机号
                var verCode = $('#vercode').val();// 验证码
                var password = $('#password').val();// 密码
                var rePassword = $('#rePassword').val();// 确认密码

                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(respPublicKey);
                var encryptPassword = encrypt.encrypt(password);
                var encryptRePassword = encrypt.encrypt(rePassword);

                $.ajax({
                    url: '/phoneRegister',
                    type: 'POST',
                    data: {
                        phone: "+86"+phone,
                        verCode: verCode,
                        password: encryptPassword,
                        rePassword: encryptRePassword
                    },
                    success: function (response) {
                        // 提交成功的处理逻辑
                        // 处理后端返回的结果
                        console.log(response);
                        if (response.code === 200) {
                            window.location.href = ctx + response.data;
                        } else {
                            if (response.code === 500) {
                                console.log(response.msg);
                                document.getElementById("msg").innerHTML = response.msg;
                            } else if (response.code === 501) {
                                console.log(response.msg);
                                document.getElementById("vercodeError").style.display = 'inline';
                                document.getElementById("vercode").focus();
                            } else {
                                window.location.href = ctx + "util/500";
                            }
                        }
                    }, error: function (error) {
                        console.log(error);
                        window.location.href = ctx + "util/500";
                    }
                });
                return false;
            });
        });

        // 当表单提交按钮被点击时
        document.querySelector('button[lay-filter="user-save1"]').addEventListener('click', function(){
            // 检查用户协议是否勾选
            let agreeCheckbox = document.querySelector('input[type="checkbox"][name="agree1"]');
            //检查其他输入框是否为空
            if (document.getElementById('phone').value === "" || document.getElementById('phone').value === null){
                document.getElementById('phoneNull').style.display = 'inline';
                document.getElementById('phoneError').style.display = 'none';
            }else {
                document.getElementById('phoneNull').style.display = 'none';
            }
            if (document.getElementById('password').value === "" || document.getElementById('password').value === null){
                document.getElementById('phonePasswordNull').style.display = 'inline';
            }else {
                document.getElementById('phonePasswordNull').style.display = 'none';
            }
            if (agreeCheckbox.checked){
                document.getElementById('agree1Error').style.display = 'none';
            }else {
                document.getElementById('agree1Error').style.display = 'inline';
            }
        });

        // 当复选框被点击时
        document.getElementById('agree1').addEventListener('change', function() {
            var agreeError = document.getElementById('agree1Error');
            if (this.checked) {
                agreeError.style.display = 'none';
            } else {
                agreeError.style.display = 'inline';
            }
        });

        // 监听电话输入框的失去焦点事件
        $('#phone').on('input', function(){
            var phone = $(this).val();
            var phoneReg = /^1[3-9]\d{9}$/; // 电话号码正则表达式
            // 验证电话号码格式是否正确
            if(phoneReg.test(phone)){
                $('#phoneError').hide(); // 隐藏错误提示
                $('#phoneNull').hide();// 隐藏空提示
            } else {
                $('#phoneError').show(); // 显示错误提示
                $('#phoneNull').hide();
                $('#phoneExist').hide();
                getCodeBtn.disabled = true;// 禁用按钮
                getCodeBtn.style.cursor = 'not-allowed';// 禁用样式
            }

        });
        $(document).ready(function() {
            $("#phone").blur(function() {
                var phone = $(this).val();
                var phoneExist = document.getElementById('phoneExist');
                var phoneNull = document.getElementById('phoneNull');
                if (phone == null || phone == ""){
                    phoneNull.style.display = 'inline';
                    getCodeBtn.disabled = true;// 禁用按钮
                    getCodeBtn.style.cursor = 'not-allowed';// 禁用样式
                }else {
                    phoneNull.style.display = 'none';
                }
                // 异步验证用户名是否存在
                if (phone) {
                    $.ajax({
                        url: "checkPhone", // 后端验证接口地址
                        type: "POST",
                        data: {
                            phone: phone
                        },
                        success: function(response) {// 成功回调函数
                            console.log(response);
                            if (response === "not exists") {
                                console.log("电话号码可用");
                                phoneExist.style.display = 'none';
                                getCodeBtn.disabled = false;// 禁用按钮
                                getCodeBtn.style.cursor = 'pointer';// 禁用样式
                            } else {
                                console.log("电话号码不可用");
                                phoneExist.style.display = 'inline';
                                getCodeBtn.disabled = true;// 禁用按钮
                                getCodeBtn.style.cursor = 'not-allowed';// 禁用样式
                            }
                        },
                        error: function() {
                            console.log("请求后端验证接口失败");
                        }
                    });
                }
            });
        });

        //当电话号码输入框失去焦点时，验证电话号码格式是否正确
        document.getElementById('phone').addEventListener('input', function() {
            var phone = this.value;
            if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                document.getElementById('email-getCodeBtn').disabled = true;
                getCodeBtn.disabled = true;// 禁用按钮
                getCodeBtn.style.cursor = 'not-allowed';// 禁用样式
            } else {
                document.getElementById('email-getCodeBtn').disabled = false;
            }
        });
        //监听验证码输入框的失去焦点事件
        document.getElementById('vercode').addEventListener('blur',function (){
            if (this.value === null || this.value === ""){
                $('#vercodeNull').show();// 显示空提示
            }else {
                $('#vercodeNull').hide();
            }
        })

        //监听电话密码输入框的失去焦点事件
        $("#password").on('input', function(){
            var password = $(this).val();
            var passwordReg = /^[a-zA-Z]\w{5,15}$/; // 密码正则表达式,以字母开头，长度在6~16之间，只能包含字符、数字和下划线
            // 验证密码格式是否正确
            if(passwordReg.test(password)){
                $('#phonePasswordError').hide(); // 隐藏错误提示
                $('#phonePasswordNull').hide();// 隐藏空提示
            } else {
                $('#phonePasswordError').show(); // 显示错误提示
                $('#phonePasswordNull').hide();
            }
        });
        document.getElementById('password').addEventListener('blur', function() {
            var phonePasswordNull = document.getElementById('phonePasswordNull');
            var phonePasswordError = document.getElementById('phonePasswordError');
            if (this.value === null || this.value === ""){
                phonePasswordNull.style.display = 'inline';
                phonePasswordError.style.display = 'none';
            }else {
                phonePasswordNull.style.display = 'none';
            }
        });

        //监听电话确定密码输入框的失去焦点事件
        $('#rePassword').on('input', function(){
            var rePassword = $(this).val();
            var password = document.getElementById('password').value;
            if (rePassword!== password){
                $('#rePhonePasswordError').show();// 显示错误提示
                $('#rePhonePasswordNull').hide();
            } else {
                $('#rePhonePasswordError').hide();
                $('#rePhonePasswordNull').hide();
            }
        });
        document.getElementById('rePassword').addEventListener('blur', function() {
            var rePhonePasswordError = document.getElementById('rePhonePasswordError');
            if (this.value === null || this.value === ""){
                rePhonePasswordError.style.display = 'inline';
            }else {
                rePhonePasswordError.style.display = 'none';
            }
        });
    });
</script>

<!--发送验证码的js-->
<script>
    const phoneInput = document.getElementById('phone');
    const getCodeBtn = document.getElementById('email-getCodeBtn');

    let countDown = 60; // 倒计时时间
    let timer = null; // 定时器
    getCodeBtn.disabled = true;// 禁用按钮
    getCodeBtn.style.cursor = 'not-allowed';// 禁用样式

    getCodeBtn.addEventListener('click', () => {
        if (phoneInput.value.length === 0) {
            getCodeBtn.disabled = true; // 禁用按钮
            getCodeBtn.style.cursor = 'not-allowed'; // 禁用样式
            return;
        }
        //如果复选框没有勾选，则不发送验证码
        if (!document.getElementById('agree1').checked) {
            // document.getElementById('agree1Error').style.display = 'inline';
            //焦点
            getCodeBtn.disabled = true; // 禁用按钮
            getCodeBtn.style.cursor = 'not-allowed'; // 禁用样式
            document.getElementById('agree1').focus();
            return;
        }
        // 发送验证码请求，成功后开始倒计时
        simulateSendCodeRequest(() => {
            // 禁用按钮，开始倒计时
            getCodeBtn.disabled = true; // 禁用按钮
            getCodeBtn.style.cursor = 'not-allowed'; // 禁用样式
            timer = setInterval(() => { // 开启
                countDown--; // 计时器递减
                getCodeBtn.innerText = `${countDown}秒后可重发`; // 倒计时显示
                if (countDown === 0) { // 倒计时结束
                    clearInterval(timer); // 清除计时器
                    getCodeBtn.disabled = false; // 启用按钮
                    getCodeBtn.innerText = '获取验证码'; // 显示
                    document.getElementById('vercodeSuccess').style.display = 'none';
                    countDown = 60; // 重置倒计时
                }
            }, 1000);
        })

        function simulateSendCodeRequest(callback) {
            // 获取输入的电话号码
            var phone = document.getElementById('phone').value;

            // 创建Ajax请求
            $.ajax({
                type: 'POST',
                url: '/getVerifyVerificationCode',
                data: { "phone": "+86" + phone },
                success: function(response) {
                    // 在这里处理服务器的响应
                    console.log(response);
                    if (response.code === 200) {
                        // 打开一个弹出层
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: '350px',
                            skin: 'layui-layer-nobg', //没有背景色
                            shadeClose: true,
                            content: '<div style="padding: 20px 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
                                '<p style="font-size: 18px; margin-bottom: 20px;">验证码已发送</p>' +
                                '<p style="font-size: 14px; margin-bottom: 20px;">请注意查收短信，若未收到，请检查是否被拦截。</p>' +
                                '<p style="font-size: 14px; margin-bottom: 20px;">若已收到，请在5分钟内输入验证码 </p>'+'</div>'
                        })
                        document.getElementById('vercodeSuccess').style.display = 'inline';
                        // 5秒后关闭弹出层
                        setTimeout(function() {
                            layer.closeAll();
                        }, 5000);
                    } else {
                        if (response.code === 400) {
                            console.log(response.message);
                        }
                    }
                },
                error: function(error) {
                    console.error(error);
                    alert('获取验证码失败!'); // 弹出提示框
                }
            });
            callback();// 回调函数
        }
    });
</script>

</body>
</html>
